<template>
    <div class="traditional">
        <div class="image">
            <img src="../../../assets/img/traditional.png" alt="">
        </div>
        <div class="num">
            <p>传统媒体<br/><strong>100+</strong>家</p>
        </div>
        <div class="text">
            <div class="print-media">
                <i></i>
                <p>平面媒体：报纸、杂志等</p>
            </div>
            <div class="electronic-media">
                <i></i>
                <p>电子媒体：电视、广播、通信等</p>
            </div>
            <div class="outdoor-media">
                <i></i>
                <p>户外媒体：高速路牌、公交站牌、高铁广告等</p>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Traditional',
    data () {
        return {

        }
    }
}
</script>
<style scoped>
.traditional {
    padding-top: 60px;
    position: relative;
}
.traditional .image {
    width: 454px;
    height: 342px;
    display: inline-block;
}
.traditional .image img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}
.traditional .num {
   position: absolute;
   top: 60px;
   right: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 342px;
}
.traditional .num p {
    font-size: 36px; /*px*/
    color: #1e90ff;
    line-height: 40px;
}
.traditional .num p strong {
    color: #05173b;
    font-weight: bolder;
    font-size: 40px;
}
.traditional .text {
    margin-top: 60px;
}
.traditional .text .print-media {
    display: flex;
}
.traditional .text .print-media i,.traditional .text .electronic-media i,.traditional .text .outdoor-media i {
    display: block;
    width: 7px;
    height: 30px;
    background-color: #1e90ff;
    margin-top: -3px;
}
.traditional .text .print-media p,.traditional .text .electronic-media p,.traditional .text .outdoor-media p {
    font-size: 30px; /*px*/
    color: #708090;
    margin-left: 17px;
}
.traditional .text .electronic-media {
    display: flex;
    margin-top: 40px;
}
.traditional .text .outdoor-media {
    display: flex;
    margin-top: 40px;
}
</style>
